<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Mootools Drag and Drop Example</title>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="mootools-1.2.3.1-more.js" type="text/javascript"></script>
  <script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
  <script src="../source/visualWindow.js" type="text/javascript"></script>
 </HEAD>

<style>
#container{
	width: 600px;
	height: 600px;
	border: 1px solid #ccc;
	overflow: auto;
	overflow-y:hidden;
	overflow-x: hidden;
	position: absolute;
}
#content {
	padding: 5px;
	width: 2272px;
	height: 1704px;
	background-color: green;
	background-image: url(http://demos111.mootools.net/demos/Fx.Scroll/mountains.jpg);
	background-repeat: none;
	position: relative;
}
#con{
		background-color: #ccc;  
	height: 600px; 
	width: 500px;
	position: relative;
	margin-top: 100px;
	margin-left: 100px;
}
#dest{
	width: 100px;
	height: 100px;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}
.VWtitleBar
{
	height: 30px; border: 2px solid #ececec;

}

</style>


<script type="text/javascript">



var MaskWindow = new Class({

    Implements: [Options, Events],
    options: {
        'containerId': 'container',
        'contentId': 'content',
        'trigger': 'mousemove',

        'onMouseMove': $empty,
        'onMouseIn': $empty,
        'onMouseOut': $empty
    },

    initialize: function(_options) {
        this.setOptions(_options);
        var c = $(this.options.containerId);
        t = $(this.options.contentId);

        // Set Styles
        c.setStyles({
            'overflow': 'auto',
            'overflow-y': 'hidden',
            'overflow-x': 'hidden'
        });
        t.setStyle('position', 'relative');

        // Add Event
        c.addEvent(this.options.trigger, function(e) {
            var size1, size2, p;
            s1 = c.getSize();
            s2 = t.getSize();
            p = c.getPosition();

            t.setPosition({
                x: (1 - s2.x / s1.x) * (e.page.x - p.x),
                y: (1 - s2.y / s1.y) * (e.page.y - p.y)
            });
            $('title').set('text', e.page.x + ":" + e.page.y);
        });
    }
});

window.addEvent('domready', function(){
	var testVW = new VWindow({
		'bodyHtml': 'this is the window!'
	});

	$(document.body).inject(testVW);

	var x = new MaskWindow({
		'containerId': 'container',
		'contentId': 'content'
	});

	var d = new Drag.Move($('dest'));


});
</script>

 <body>

<div id="con">


	<div id="dest">
		<div id='title'>This is title bar.</div>
	</div>  

	<!---
	<div id="container">

		<div id="content">This is content.
		
		<IFRAME SRC="http://it.sohu.com" TITLE="The Famous Recipe" style="width: 100%; height: 100%;">
			 Alternate content for non-supporting browsers 
			<H2>The Famous Recipe</H2>
			<H3>Ingredients</H3>
			...
		</IFRAME>

		</div>

	</div>
	--->

</div>
 </body>
</HTML>
